import React from 'react';
import {Text, View, ViewStyle} from 'react-native';

type LabelAndValueProps = {
  label: string;
  value: string | null | undefined;
  alignment?: 'left' | 'center';
  style?: ViewStyle;
};

const LabelAndValue: React.FC<LabelAndValueProps> = props => {
  return (
    <View
      className="gap-y-[2px]"
      style={{
        alignItems: props.alignment === 'center' ? 'center' : 'flex-start',
        ...props.style,
      }}>
      <Text className="text-text4 text-[12px]">{props.label}</Text>
      <Text className="text-text1 text-[17px] font-medium">{props.value ?? '- -'}</Text>
    </View>
  );
};

export default React.memo(LabelAndValue);
